	<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts v3 Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>

<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td> 
      <h2 class="pageHeader">Using FusionCharts with JSP &gt; Basic Examples </h2>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <p>FusionCharts can effectively be used with JSP to plot dynamic data-driven 
        charts. In this example, we'll show a few basic examples to help you get 
        started.</p>
      <p>We'll cover the following examples here:</p>
      <ol>
        <li>We'll use FusionCharts in JSP with a pre-built Data.xml (which contains 
          data to plot)</li>
        <li>We'll then change the above chart into a single page chart using dataXML 
          method.</li>
        <li>Finally, we'll use FusionCharts JavaScript class to embed the chart.</li>
      </ol>
      <p>Let's quickly see each of them. <strong>Before you proceed with the contents 
        in this page, we strictly recommend you to please go through the section 
        &quot;How FusionCharts works?&quot;.</strong> </p>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top" class="highlightBlock">All code discussed here is present 
      in <span class="codeInline">Download Package &gt; Code &gt; JSP</span> &gt; 
      <span class="codeInline">BasicExample</span> folder. </td>
  </tr>
  <tr> 
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top" class="header">Setting up the charts for use </td>
  </tr>
  <tr> 
    <td valign="top" class="text">In our code, we've used the charts contained 
      in <span class="codeInline">Download Package &gt; Code &gt; FusionCharts</span> 
      folder. When you run your samples, you need to make sure that the SWF files 
      are in proper location. </td>
  </tr>
  <tr> 
    <td valign="top" class="header">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top" class="header">Plotting a chart from data contained in <span class="codeInline">Data.xml</span></td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <p>Let's now get to building our first example. In this example, we'll create 
        a &quot;Monthly Unit Sales&quot; chart using <span class="codeInline">dataURL</span> 
        method. For a start, we'll hard code our XML data in a physical XML document 
        <span class="codeInline">Data.xml </span>and then utilize it in our chart 
        contained in an JSP Page (<span class="codeInline">BasicChart.jsp</span>).      </p>
      <p>Let's first have a look at the XML Data document:</p>    </td>
  </tr>
  <tr> 
    <td valign="top" class="codeBlock">&lt;chart caption='Monthly Unit Sales' 
      xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' 
      showBorder='1'&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Jan' value='462' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Feb' value='857' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Mar' value='671' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Apr' value='494' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='May' value='761' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Jun' value='960' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Jul' value='629' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Aug' value='622' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Sep' value='376' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Oct' value='494' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Nov' value='761' /&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&lt;set label='Dec' value='960' /&gt;<br />
      &lt;/chart&gt;</td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <p>This XML is stored as <span class="codeInline">Data.xml</span> in <span class="codeInline">Data 
        </span>Folder under <span class="codeInline">BasicExample</span> folder. 
        It basically contains the data to create a single series chart to show 
        &quot;Monthly Unit Sales&quot;. We'll plot this on a Column 3D Chart. 
        Let's see how to do that. </p>
      <p>To plot a Chart that consumes this data, you need to include the HTML 
        code to embed a Flash object and then provide the requisite parameters. 
        To make things simpler for you, we've put all this functionality in an 
        JSP function named as <span class="codeInline">createChartHTML()</span>. 
        This function is contained in <span class="codeInline">Download Package 
        &gt; Code &gt; JSP &gt; Includes &gt; FusionCharts.jsp</span> file. So, 
        whenever you need to work with FusionCharts in JSP, just include this 
        file in your page and then you can work with FusionCharts very easily.        </p>
      <p class="highlightBlock">The same functionality is also present in <span class="codeInline">org.infosoftglobal.fusioncharts.FusionChartsCreator.java</span> and it can be imported and used. We will see how to do this later.</p>
      <p>Let's see it in example. <span class="codeInline">BasicChart.jsp</span> 
        contains the following code to render the chart:</p>    </td>
  </tr>
  <tr> 
    <td valign="top" class="codeBlock">&lt;%@ include file=&quot;../Includes/FusionCharts.jsp&quot;%&gt;<br />
      &lt;HTML&gt;<br />
      &nbsp;&nbsp;&nbsp;&lt;HEAD&gt;<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Simple Column 
      3D Chart&lt;/TITLE&gt; <br />
      &nbsp;&nbsp;&nbsp;&lt;/HEAD&gt;<br />
      &nbsp;&nbsp;&nbsp;&lt;BODY&gt;<br />
      &nbsp;&nbsp;&nbsp;&lt;%<br />
      &nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;&nbsp;//Create 
      the chart - Column 3D Chart with data from Data/Data.xml</span><br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>String chartHTMLCode=createChartHTML(&quot;../../FusionCharts/Column3D.swf&quot;, 
      &quot;Data/Data.xml&quot;, &quot;&quot;, &quot;myFirst&quot;, 600, 300, 
      false)</strong> ;<br />
      &nbsp;&nbsp;&nbsp;%&gt;<br />
      &nbsp;&nbsp;&nbsp;<strong>&lt;%=chartHTMLCode%&gt;</strong><br />
      &nbsp;&nbsp;&nbsp;&lt;/BODY&gt;<br />
      &lt;/HTML&gt;</td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <p>As you can see above, we've first included <span class="codeInline">FusionCharts.jsp</span> 
        to help us easily create charts. After that, we've simply invoked the 
        <span class="codeInline">createChartHTML</span> function to render the 
        chart. To this function, you need to pass the following parameters (in 
        same order):</p>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <table width="95%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#f1f1f1">
        <tr> 
          <td width="10%" valign="top" class="header">Parameter</td>
          <td width="12%" valign="top" class="header">Type</td>
          <td width="78%" valign="top" class="header">Description</td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline" width="10%" height="42">chartSWF</td>
          <td valign="top" class="text" width="12%" height="42">String</td>
          <td valign="top" class="text" width="78%" height="42">SWF File Name 
            (and Path) of the chart which you intend to plot. Here, we are plotting 
            a Column 3D chart. So, we've specified it as <span class="codeInline">../../FusionCharts/Column3D.swf</span></td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline" width="10%">strURL</td>
          <td valign="top" class="text" width="12%">String</td>
          <td valign="top" class="text" width="78%">If you intend to use <span class="codeInline">dataURL</span> 
            method for the chart, pass the URL as this parameter. Else, set it 
            to &quot;&quot; (in case of <span class="codeInline">dataXML</span> 
            method). In this case, we're using <span class="codeInline">Data.xml</span> 
            file, so we specify <span class="codeInline">Data/Data.xml</span></td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline" width="10%">strXML</td>
          <td valign="top" class="text" width="12%">String</td>
          <td valign="top" class="text" width="78%">If you intend to use <span class="codeInline">dataXML</span> 
            method for this chart, pass the XML data as this parameter. Else, 
            set it to &quot;&quot; (in case of <span class="codeInline">dataURL</span> 
            method). Since we're using <span class="codeInline">dataURL</span> 
            method, we specify this parameter as &quot;&quot;.</td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline" width="10%">chartId</td>
          <td valign="top" class="text" width="12%">String</td>
          <td valign="top" class="text" width="78%"> Id for the chart, using which 
            it will be recognized in the HTML page. <strong>Each chart on the 
            page needs to have a unique Id.</strong></td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline" width="10%">chartWidth</td>
          <td valign="top" class="text" width="12%">int</td>
          <td valign="top" class="text" width="78%">Intended width for the chart 
            (in pixels)</td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline" width="10%">chartHeight</td>
          <td valign="top" class="text" width="12%">int</td>
          <td valign="top" class="text" width="78%">Intended height for the chart 
            (in pixels)</td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline" width="10%">debugMode</td>
          <td valign="top" class="text" width="12%">boolean</td>
          <td valign="top" class="text" width="78%">Whether to start the chart 
            in debug mode. Please see <span class="codeInline">Debugging your 
            Charts</span> section for more details on Debug Mode. </td>
        </tr>
      </table>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <p>When you now run this page, you'll see a chart like the one below. </p>
      <p class="highlightBlock">If you do not see a chart like the one below, 
        please follow the steps listed in <span class="codeInline">Debugging your 
        Charts &gt; Basic Troubleshooting</span> section of this documentation.      </p>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top" class="text"><img src="Images/Code_BasicChart.jpg" width="591" height="292" /></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>Next, we will see how to use 
        <span class="codeInline">FusionChartsCreator.java</span> class instead of functions from <span class="codeInline">FusionCharts.jsp</span>. Using this Java Class is a better better way of creating charts in your applications. However, for the sake for simplicity, in our examples, we'll stick to include function. </p>
      <p><span class="codeInline">BasicChartUsingFusionChartsClass.jsp</span> contains the following code to render the chart:</p></td>
  </tr>
  
  <tr>
    <td valign="top" class="codeBlock"> 
      <p>&lt;%<br>
        <span class="codeComment">/*We've imported FusionChartsCreator.java, which 
        contains functions<br>
        to help us easily create the charts.*/</span><br>
        %&gt;<br>
        <b>&lt;%@ page import=&quot;com.infosoftglobal.fusioncharts.FusionChartsCreator&quot;%&gt;</b><br>
        &lt;HTML&gt;<br>
        &nbsp;&nbsp;&nbsp;&lt;HEAD&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Simple 
        Column 3D Chart&lt;/TITLE&gt;<br>
        <br>
        &nbsp;&nbsp;&nbsp;&lt;/HEAD&gt;<br>
        &nbsp;&nbsp;&nbsp;&lt;BODY&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;%<br>
        <br>
        <span class="codeComment">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*This page 
        demonstrates the ease of generating charts using FusionCharts.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;For this chart, we've used a pre-defined 
        Data.xml (contained in /Data/ folder)<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ideally, you would NOT use a physical 
        data file. Instead you'll have <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;your own JSP code create the XML data 
        document. Such examples are also present.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;For a head-start, we've kept this 
        example very simple.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/</span><br>
        <br>
        <span class="codeComment">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Create 
        the chart - Column 3D Chart with data from Data/Data.xml</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String chartHTMLCode=<b>FusionChartsCreator.createChartHTML</b>(&quot;../../FusionCharts/Column3D.swf&quot;, 
        &quot;Data/Data.xml&quot;, &quot;&quot;, &quot;myFirst&quot;, 600, 300,false);
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%&gt;<br>
        <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;%=chartHTMLCode%&gt;</strong><br>
        &nbsp;&nbsp;&nbsp;&lt;/BODY&gt;<br>
      &lt;/HTML&gt;      </td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>So, you just saw how simple it is to create 
      a chart using JSP and FusionCharts. For further information about the<br>
      <span class="codeInline">FusionChartsCreator</span> class refer to the java documentation of the class (present in <span class="codeInline">Download Package &gt; JSP &gt; JavaDocs</span>) </p>
      <p>Let's now convert the above chart to use <span class="codeInline">dataXML</span> method. </p></td>
  </tr>
  <tr> 
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top" class="header">Changing the above chart into a single page 
      chart using dataXML method</td>
  </tr>
  <tr> 
    <td valign="top" class="text">To convert this chart to use <span class="codeInline">dataXML</span> method, 
      we create another page <span class="codeInline">BasicDataXML.jsp</span> 
      in the same folder with following code: </td>
  </tr>
  <tr> 
    <td valign="top" class="codeBlock"> 
      <p><br>
        &lt;%@ include file=&quot;../Includes/FusionCharts.jsp&quot;%&gt;<br>
        &lt;HTML&gt;<br>
        &nbsp;&nbsp;&nbsp;&lt;HEAD&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Simple 
        Column 3D Chart using dataXML method&lt;/TITLE&gt;<br>
        &nbsp;&nbsp;&nbsp; &lt;/HEAD&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&lt;BODY&gt;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;%<br>
        <br>
        <span class="codeComment">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*This 
        page demonstrates the ease of generating charts using FusionCharts.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;For this chart, 
        we've used a string variable to contain our entire XML data.<br>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ideally, you would generate 
        XML data documents at run-time, after interfacing with<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;forms or databases 
        etc.Such examples are also present.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Here, we've kept 
        this example very simple.<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*/</span><br>
        <span class="codeComment">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Create 
        an XML data document in a string variable</span><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String strXML=&quot;&quot;;<br>
        <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;chart 
        caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' 
        formatNumberScale='0' <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showBorder='1'&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Jan' value='462' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Feb' value='857' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Mar' value='671' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Apr' value='494' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='May' value='761' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Jun' value='960' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Jul' value='629' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Aug' value='622' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Sep' value='376' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Oct' value='494' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Nov' value='761' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;set 
        label='Dec' value='960' /&gt;&quot;;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML +=&quot;&lt;/chart&gt;&quot;;<br>
        <br>
        <span class="codeComment">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Create 
        the chart - Column 3D Chart with data from strXML variable using </span> 
        dataXML method<br>
        <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String chartCode=createChartHTML(&quot;../../FusionCharts/Column3D.swf&quot;, 
        &quot;&quot;,strXML,&quot;myNext&quot;, 600, 300,false);</b><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%&gt; <br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp;&lt;%=chartCode%&gt; </strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/BODY&gt;<br>
        &lt;/HTML&gt;<br>
      </p>      </td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <p>As you can see above, we:</p>
      <ol>
        <li>Include <span class="codeInline">FusionCharts.jsp</span> file to create 
          charts easily</li>
        <li>Create the XML data document in an JSP variable <span class="codeInline">strXML 
          </span><span class="text">using string concatenation. Here, we're hard-coding 
          the data. In your applications, you can build this data dynamically 
          after interacting with databases or external sources of data.</span>        </li>
        <li>Finally, create the chart and set the <span class="codeInline">dataXML</span> 
          parameter as <span class="codeInline">strXML</span>. We leave <span class="codeInline">dataURL</span> 
          parameter blank.</li>
      </ol>
      <p>When you see this chart, you'll get the same results as before. </p>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr> 
    <td valign="top" class="header">Using FusionCharts JavaScript class to embed 
      the chart.</td>
  </tr>
  <tr> 
    <td valign="top" class="text">If you see the charts from previous examples 
      in the latest versions of Internet Explorer, you'll see a screen as below:    </td>
  </tr>
  <tr> 
    <td valign="top" class="text"><img src="Images/Code_Activate.jpg" width="606" height="310" /></td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <p>Internet Explorer asks you to <span class="codeInline">&quot;Click and 
        activate...&quot; </span>to use the chart. This is happening because of 
        a technical issue on behalf of Microsoft. As such, all Flash movies need 
        to be clicked once before you can start interacting with them. </p>
      <p>However, the good news is that there's a solution to it. This thing happens 
        only when you directly embed the HTML code of the chart. It would NOT 
        happen when you use JavaScript to embed the chart. To see how to embed 
        using JavaScript at code level, please see <span class="codeInline">Creating 
        Your First Chart &gt; JavaScript Embedding</span> Section. </p>
      <p>Again, to make things simpler for you, we've provided an JSP function 
        called <span class="codeInline">createChart() </span>which helps you wrap 
        this JavaScript function, so that you don't have to get your hands dirty 
        with JavaScript, Flash and HTML. This function is contained in the previously 
        used <span class="codeInline">FusionCharts.jsp or FusionChartsCreator.java</span> 
        file. </p>
      <p>Let's now quickly put up a sample to show the use of this function. We 
        create another JSP page <span class="codeInline">SimpleChart.jsp</span> 
        to use this function to plot a chart from data contained in our previously 
        created<span class="codeInline"> Data.xml</span> file. It contains the 
        following code: </p>    </td>
  </tr>
  <tr> 
    <td valign="top" class="codeBlock">&lt;%@ include file=&quot;../Includes/FusionCharts.jsp&quot;%&gt;<br>
      &lt;HTML&gt;<br>
      &nbsp;&nbsp;&nbsp;&lt;HEAD&gt;<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;FusionCharts - Simple Column 
      3D Chart&lt;/TITLE&gt;<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp; &lt;SCRIPT LANGUAGE=&quot;Javascript&quot; 
      SRC=&quot;../../FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;</strong><br>
      &nbsp;&nbsp;&nbsp;&lt;/HEAD&gt;<br>
      &nbsp;&nbsp;&nbsp;&lt;BODY&gt;<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;%<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">//Create the chart - Column 3D 
      Chart with data from Data/Data.xml</span><br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;String chartCode= createChart(&quot;../../FusionCharts/Column3D.swf&quot;, 
      &quot;Data/Data.xml&quot;, &quot;&quot;, &quot;myFirst&quot;, 600, 300, 
      false, false);<br>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;%&gt; <br>
      <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;%=chartCode%&gt;</strong>
      <br>
      &nbsp;&nbsp;&nbsp;&lt;/BODY&gt;&nbsp;&nbsp;&nbsp;<br>
      &lt;/HTML&gt; </td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <p>As you can see above, we've:</p>
      <ol>
        <li>Included <span class="codeInline">FusionCharts.js</span> file, which 
          is required when using the JavaScript method.</li>
        <li>Included <span class="codeInline">FusionCharts.jsp</span> file. </li>
        <li>Created the chart using <span class="codeInline">createChart()</span> 
          method. </li>
      </ol>
      <p>The<span class="codeInline"> createChart()</span> method takes in the 
        following parameters: </p>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text"> 
      <table width="95%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#f1f1f1">
        <tr> 
          <td width="19%" valign="top" class="header">Parameter</td>
          <td width="12%" valign="top" class="header">Type</td>
          <td width="81%" valign="top" class="header">Description</td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline">chartSWF</td>
          <td valign="top" class="text" width="12%" height="42">String</td>
          <td valign="top" class="text">SWF File Name (and Path) of the chart 
            which you intend to plot. Here, we are plotting a Column 3D chart. 
            So, we've specified it as <span class="codeInline">../../FusionCharts/Column3D.swf</span></td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline">strURL</td>
          <td valign="top" class="text" width="12%">String</td>
          <td valign="top" class="text">If you intend to use <span class="codeInline">dataURL</span> 
            method for the chart, pass the URL as this parameter. Else, set it 
            to &quot;&quot; (in case of <span class="codeInline">dataXML</span> 
            method). In this case, we're using <span class="codeInline">Data.xml</span> 
            file, so we specify <span class="codeInline">Data/Data.xml</span></td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline">strXML</td>
          <td valign="top" class="text" width="12%">String</td>
          <td valign="top" class="text">If you intend to use <span class="codeInline">dataXML</span> 
            method for this chart, pass the XML data as this parameter. Else, 
            set it to &quot;&quot; (in case of <span class="codeInline">dataURL</span> 
            method). Since we're using <span class="codeInline">dataURL</span> 
            method, we specify this parameter as &quot;&quot;.</td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline">chartId</td>
          <td valign="top" class="text" width="12%">String</td>
          <td valign="top" class="text"> Id for the chart, using which it will 
            be recognized in the HTML page. <strong>Each chart on the page needs 
            to have a unique Id.</strong></td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline">chartWidth</td>
          <td valign="top" class="text" width="12%">int</td>
          <td valign="top" class="text">Intended width for the chart (in pixels)</td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline">chartHeight</td>
          <td valign="top" class="text" width="12%">int</td>
          <td valign="top" class="text">Intended height for the chart (in pixels)</td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline">debugMode</td>
          <td valign="top" class="text" width="12%">boolean</td>
          <td valign="top" class="text">Whether to start the chart in debug mode. 
            Please see Debugging your Chart Section for more details on Debug 
            Mode. </td>
        </tr>
        <tr> 
          <td valign="top" class="codeInline">registerWithJS</td>
          <td valign="top" class="text">boolean</td>
          <td valign="top" class="text"> Whether to register the chart with JavaScript. 
            Please see FusionCharts and JavaScript section for more details on 
            this. </td>
        </tr>
      </table>    </td>
  </tr>
  <tr> 
    <td valign="top" class="text">When you now view the chart, you'll see that 
      no activation is required even in Internet Explorer. </td>
  </tr>
</table>
</body>
</html>
